<!DOCTYPE html>
<head>
    <style>
        div.a{
            width: 1000px;
            height: 500px;
            border: 2px solid;
            animation-name: sys;
            animation-duration: 10s;
            animation-iteration-count:infinite;
            background-size: 100% 100%;

        }
        @keyframes sys{
            0%{background-image: url('20220224142234_13284.jpg') ;}
            20%{background-image: url('20220224142226_60445.jpg');}
            40%{background-image: url('20220224142225_64395.jpg');}
            60%{background-image: url('20210222165650_29635.jpg');}
            100%{background-image: url('20210222165649_29101.jpg');} 
        }
        div.b{
            border:2px solid;
            border-radius: 15px;
            height: 100px;
            width: 100px;
            margin-top:0px;
            animation-name:mysys;
            animation-duration: 10s;
            animation-play-state:running ;
            animation-iteration-count:infinite;
            
            background-color: white;
            background-image: url('imgx.xiawu.jpeg');
          background-size:100% 100%;
          
        }
        div.b:hover{
            animation-play-state: paused;
        }
        @keyframes mysys {
         20% {
          transform: translate(900px, 200px);
         
        }

         40% {
         transform: translate(0, 400px);
        }

          60% {
          transform: translate(900px, 200px);
         }
        }
        </style>

 
</head>
<body>
<div class="a">
    <div class="b">
        
    </div>
</div>

</body>
</html>